@charset "utf-8";


/* CSS Document */
html, body {font-size: 12px;margin: 0 auto;padding: 0;text-decoration: none; width:100%; height: 100%; -webkit-text-size-adjust: 100%;}
html{font-size: 62.5%;}
body{ position: relative; overflow-x:hidden; transition-property:all;}
a {	color: #666;text-decoration: none;outline:none;  star:expression(this.onFocus=this.blur());}
a:hover, a:active { color:#025b61;}
* { margin: 0;padding: 0;list-style: none;outline:none;box-sizing:border-box;  }
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0;margin:0;}
form {margin: 0;}
img {border: 0 none;text-align-last: center;vertical-align: middle;  outline:none; max-width:100%; width:auto; height:auto;}
center {text-align: left;	color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;margin:0 !important;padding:0 !important;}
.fl-left, .fl{ float:left;}
.fl-right, .fr{ float:right;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.boxflex{display: -webkit-box;display:-moz-box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;-moz-box-flex:wrap;-ms-flex-wrap:wrap;}
.flex{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}
.mob{display:none;}
.hide{display: none;}
.wrap{ width: 86%; max-width: 1560px; margin: 0 auto;}
::-webkit-scrollbar {width:8px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background:#666;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #ededed;}


/* head*/
#head { position:fixed; z-index:990; left: 0; top:20px; width:100%; height: 100px; background: rgba(0,91,97,0); box-sizing: border-box;transition: all .35s;}
#head .wrap{ position: relative; max-width: inherit; transition: all .6s;}
#head .logo{ width: 30%;text-align: left; box-sizing: border-box;line-height: 100px; transition: all .35s;}
#head .logo img{width: auto;height: 60px; transition: all .35s;}
#head .logo img.white{display: inline-block;}
#head .logo img.green{display: none;}
#head .menu{ position: absolute;z-index: 10; right: 80px;top: 0; }
#head .menu>.click{display: none;}
#head .menu>.nav, #head .menu>.nav>ul{margin: 0 auto;}
#head .menu>.nav>ul>li{ position: relative; display: inline-block; vertical-align: top; padding: 0 20px;}
#head .menu>.nav>ul>li>a{display: block; font-size: 1.6rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.1); line-height: 100px;transition: all .35s;}
#head .menu>.nav>ul>li>a>span{position: relative;z-index: 60;}
#head .menu>.nav>ul>li>div{display: none;position: absolute;z-index: 90; top: 90px;  left: 50%; transform: translate(-50%, 0); text-align: center; width: 100%; border-radius: 0 0 20px 0; padding: 20px 0; box-sizing: border-box;background: rgba(0,0,0,.6); box-shadow: 0 2px 6px rgba(0,0,0,.1); }
#head .menu>.nav>ul>li>div:after{position: absolute;z-index: 10; top: -10px; left: 50%; margin-left: -10px; width: 0; height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid rgba(0,0,0,.6); content: ''; transition: all .35s;}
#head .menu>.nav>ul>li>div.product{ width: 250px;}
#head .menu>.nav>ul>li>div>a{ position: relative; display: block; box-sizing: border-box; padding: 10px 0; font-size: 1.5rem; color: #fff; transition: all .35s;}
#head .menu>.nav>ul>li>div>a>img{display: none;}
#head .menu>.nav>ul>li>div>a:hover{background: rgba(0,91,97,1);}

#head .search{position: absolute;z-index: 10; right: 0;top: 50%; margin-top: -40px; width: 60px; height: 80px; text-align: right;  }
#head .search:after{position: absolute;z-index: 5; left: 0;top: 50%; margin-top: -15px; width: 2px;height: 30px; background: rgba(255,255,255,.3); content: ''; }
#head .search>a{display: block; line-height: 80px;}
#head .search>a>i{font-size: 2.4rem; color: #fff;}

#head.active{ top: 0; height: 80px; background: rgba(0,91,97,.7);}
#head.active .logo{line-height: 80px;}
#head.active .logo img{height: 40px;}
#head.active .menu>.nav>ul>li>a{line-height: 80px;}
#head.active .menu>.nav>ul>li>div{top: 80px; background: rgba(255,255,255,1);}
#head.active .menu>.nav>ul>li>div:after{border-bottom: 10px solid rgba(255,255,255,1);}
#head.active .menu>.nav>ul>li>div>a{ color: #666;}
#head .menu>.nav>ul>li>div>a:hover{background: rgba(14,189,201,1); color: #fff;}

#head.inner{background: rgba(255,255,255,1); top: 0; height: 90px; border-bottom: 1px solid #eee;}
#head.inner .logo{line-height: 90px;}
#head.inner .logo img{height: 50px;}
#head.inner .logo img.white{display: none;}
#head.inner .logo img.green{display: inline-block;}


#head.inner .menu>.nav>ul>li>a{ color: #333; line-height: 90px;}
#head.inner .menu>.nav>ul>li>a:after{position: absolute;z-index: 2; left: 0;bottom: 0; width: 100%;height: 0;background: rgba(0,91,97,1); background:linear-gradient(to right bottom,rgba(0,91,97,1),rgba(14,189,201,1)); opacity: 0; content: '';transition: all .35s;}
#head.inner .menu>.nav>ul>li>a:hover, #head.inner .menu>.nav>ul>li.active>a{color: rgba(255,255,255,1);}
#head.inner .menu>.nav>ul>li>a:hover:after,#head.inner .menu>.nav>ul>li.active>a:after{height: 100%;opacity: 1;}
#head.inner .menu>.nav>ul>li>div{ position: fixed; width: 100%; top: 90px; padding: 30px 0; background: rgba(0,91,97,.7);}
#head.inner .menu>.nav>ul>li>div:after{display: none;}
#head.inner .menu>.nav>ul>li>div>a{display: inline-block; padding: 0 40px; text-align: center;}
#head.inner .menu>.nav>ul>li>div>a>img{display: block; height: 60px;width: auto; margin:0 auto 10px auto;}
#head.inner .menu>.nav>ul>li>div>a:hover{background:none; color: rgba(14,189,201,1); transform: scale(0.9);}
#head.inner.active .menu>.nav>ul>li>div{background: rgba(0,91,97,.7);}
#head.inner.active .menu>.nav>ul>li>div>a{ color: #fff;}
#head.inner.active .menu>.nav>ul>li>div>a:hover{ color: rgba(14,189,201,1); }

#head.inner .search:after{ background: rgba(0,0,0,.1);}
#head.inner .search>a>i{color: rgba(0,91,97,1);}



#menu-mob { display: none;}

/* end*/


/* search*/

#search{ display: none; position: fixed;z-index: 1000;left: 0;top: 0; background: rgba(0,91,97,.9);width: 100%;height: 100%; }
#search>.close{position: absolute;z-index: 60; right: 50px; top: 50px; cursor: pointer; width: 60px; height: 60px; line-height: 60px;text-align: center; transition: all 1s;}
#search>.close>i{color: #fff;font-size: 6rem;}
#search>.close:hover{transform: rotate(360deg);}
#search>.box{ position: absolute;z-index: 60; left: 50%; top: 50%; margin-left: -35%;  width: 70%; transform: translate(0,-50%);}
#search>.box form{ display: block; background:rgba(255,255,255,1);overflow: hidden;}
#search>.box form>input{display: block;box-sizing: border-box; float: left; width: 80%; height: 70px; line-height: 70px; padding-left: 30px; font-size: 1.6rem; color: #666; border: 0;}
#search>.box form>button{display: block;float: right; width: 20%; height: 70px; line-height: 70px; border: 0; color: #fff; background:linear-gradient(to right bottom,rgba(110,110,110,1),rgba(0,0,0,1)); cursor: pointer; text-align: center;}
#search>.box form>button>i{display: inline-block; font-size: 2rem;}

/* end*/







/* fullpage*/
#fp-nav ul li, .fp-slidesNav ul li { margin:12px  7px!important;}
#fp-nav ul li a span, .fp-slidesNav ul li a span {height: 6px!important;width: 6px!important;background: rgba(0,91,97,.4)!important;margin: -3px 0 0 -3px!important;}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span {height: 20px!important;width: 20px!important; background-image: url("../img/logo_big.png") !important; background-color: transparent!important;  background-size: 100% auto!important; margin: -10px 0 0 -10px!important;}

/* end*/





/* banner*/

#banner{margin: 0 auto; overflow: hidden;}
#banner>.inner{position: relative; margin: 0 auto; padding-top: 90px;}
#banner>.inner>.box{ position: absolute;z-index: 80; left: 50%;top: 46%; margin-left: -30%; width: 60%;text-align: center;}
#banner>.inner>.box>.tit{font-size: 5rem; font-weight: bold; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.2);}
#banner>.inner>.box>.txt{ padding: 20px 0; font-size: 2rem; color: rgba(255,255,255,.8);text-shadow: 0 1px 2px rgba(0,0,0,.1);}
#banner>.inner>.img{ position:relative;text-align: left;}
#banner>.inner>.img:after{ display: none; position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 100%; background: rgba(0,0,0,.6); content: '';}
#banner>.inner>.img>img{width: 100%;height: auto;}

#banner .swiper .swiper-pagination{ bottom: 60px;}
#banner .swiper .swiper-pagination .swiper-pagination-bullet{width: 30px; background: #fff;opacity: .6; border-radius: 0;}
#banner .swiper .swiper-pagination .swiper-pagination-bullet-active{ background: rgba(0,91,97,1);opacity: 1;}
/* end*/






/* path*/
#path{ position: relative;z-index: 50; left: 0;margin-top: -45px; height: 45px; background: rgba(0,0,0,.3); border-top: 1px solid rgba(255,255,255,.1); width: 100%;}
#path>.wrap{text-align: left; margin: 0 auto; line-height: 45px; font-size: 1.4rem; color: rgba(255,255,255,.8);}
#path a{display: inline-block;font-size: 1.4rem; color: rgba(255,255,255,1); transition: all .35s;}
#path a:hover{ color: rgba(14,189,201,1);}

/* end*/


/* navpart*/

/*#navpart{ position: relative;  margin: 0 auto; top: 0; padding-top: 90px; background: rgba(0,91,97,.8); transition: all .8s;}
#navpart .wrap{ margin: 0 auto;}
#navpart ul{margin: 0 auto;white-space: nowrap; text-align: center;}
#navpart ul>li{ position: relative; display:inline-block; vertical-align:top; box-sizing: border-box;}
#navpart ul>li>a{ position: relative;z-index: 50; display: block; box-sizing: border-box; height: 60px; line-height: 60px;  padding: 0 50px; font-size: 1.6rem; color: rgba(255,255,255,1);transition: all .35s;}
#navpart ul>li>a.active{color: rgba(255,255,255,1)!important; background: rgba(255,255,255,.2) !important;}
#navpart ul>li>a.active:after{ display: none; position: absolute;z-index: 3; left: 50%; bottom: 3px; margin-left: -6px; width: 0;height: 0; opacity: 1; border: 6px solid; border-top-color:rgba(255,255,255,1); border-left-color:transparent; border-right-color: transparent; border-bottom-color: transparent; content: ''; transition: all .35s; }
#navpart ul>li:hover a{ color: rgba(255,255,255,1); background: rgba(255,255,255,.1);}*/

#navpart{ position: relative;  margin: 0 auto; top: 0; padding: 20px; background: #f2fafb; border: 1px solid rgba(0,91,97,.1); transition: all .8s;}
#navpart .wrap{ width: 86%; max-width: 1360px; margin: 0 auto;}
#navpart ul{margin: 0 auto;white-space: nowrap; text-align: center;}
#navpart ul>li{ position: relative; display:inline-block; vertical-align:top; box-sizing: border-box; margin: 0 6px;}
#navpart ul>li>a{ position: relative;z-index: 50; display: block; box-sizing: border-box; height: 50px; line-height: 50px; padding: 0 50px; font-size: 1.6rem; color: #666;transition: all .35s;}
#navpart ul>li>a.active{color: rgba(255,255,255,1)!important; background: rgba(0,91,97,1); background:linear-gradient(to right bottom,rgba(0,91,97,1),rgba(14,189,201,1)) !important;}
#navpart ul>li>a.active:after{ display: none; position: absolute;z-index: 3; left: 50%; bottom: 3px; margin-left: -6px; width: 0;height: 0; opacity: 1; border: 6px solid; border-top-color:rgba(255,255,255,1); border-left-color:transparent; border-right-color: transparent; border-bottom-color: transparent; content: ''; transition: all .35s; }
#navpart ul>li:hover a{ color: rgba(0,91,97,1); background: rgba(0,91,97,.15);}


#navpart.active{position: fixed;z-index: 900; left: 0;top: 90px; width: 100%; padding-top: 0;}
#navpart.active ul>li>a{ height: 50px; line-height: 50px;}
#navpart .pgwMenu { position: relative; text-align: center; padding: 0;margin: 0; }
#navpart .pgwMenu ul { list-style: none; white-space: nowrap;}
#navpart .pgwMenu .pm-links{display: inline-block;vertical-align:top;}
#navpart .pgwMenu .pm-dropDown{ display: none;position: relative; width: 100%;margin: 0 auto; vertical-align:top; }
#navpart .pgwMenu .pm-dropDown>a{position: relative; display: block; color: rgba(255,255,255,1); font-size: 1.6rem; background: rgba(14,189,201,1); box-shadow: 1px 2px 3px rgba(0,0,0,.1); height: 50px; line-height: 50px; padding: 0 30px; text-decoration: none;}
#navpart .pgwMenu .pm-dropDown>a>i{margin-right: 5px; font-size: 1.8rem;}
#navpart .pgwMenu .pm-links.mob{ position: absolute;z-index: 9; left: 0; width: 100%; background: rgba(255,255,255,1); }
#navpart .pgwMenu .pm-links.mob>li{ display:block!important; padding: 0;margin: 0; border-bottom: 1px solid #eee; }
#navpart .pgwMenu .pm-links.mob>li>a{display: block;}
#navpart .pgwMenu .pm-links.mob>li>a:hover{color: rgba(14,189,201,1);}
#navpart .pgwMenu .pm-viewMore{ display: none;position: relative;vertical-align:top; }
#navpart .pgwMenu .pm-viewMore>a{position: relative; display: inline-block; color: rgba(14,189,201,1); height: 50px; line-height: 50px; padding: 0 30px; text-decoration: none;}
#navpart .pgwMenu .pm-viewMore>a>i{margin-left: 5px;opacity: .6; font-size: 2rem;}
#navpart .pgwMenu .pm-viewMore>ul{ position: absolute;z-index: 3; right: 0;background:#fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
#navpart .pgwMenu .pm-viewMore>ul>li{ display:block!important; padding: 0;margin: 0; border-bottom: 1px solid #eee; }
#navpart .pgwMenu .pm-viewMore>ul>li:after{display: none!important;}
#navpart .pgwMenu .pm-viewMore>ul>li>a{display: block; color:#666; transition: all .35s;}
#navpart .pgwMenu .pm-viewMore>ul>li>a:hover{color: rgba(14,189,201,1); background: #fff!important;}



/* end*/








/* loading*/

#loading{ position: fixed;z-index: 1000; left: 0;top: 0;width: 100%;height: 100%; background: rgba(255,255,255,1);}
#loading>.box{position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; width: 80px;height: 80px;display: flex; justify-content: center; align-items: center;}
#loading>.box .load-ring{ display: block; margin: 0 auto; width: 100%;height: 100%; background: url("../img/logo_s.png") no-repeat; background-position: 50% 50%; background-size: 20px auto;}
#loading>.box .load-ring span{ box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px; border: 8px solid rgba(0,91,97,1); border-radius: 50%; -webkit-animation: ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;animation: ring 1.2s cubic-bezier(.5, 0, .5, 1) infinite;border-color: rgba(0,91,97,1) transparent transparent transparent}
#loading>.box .load-ring span:first-child {-webkit-animation-delay: -.45s;animation-delay: -.45s;}
#loading>.box .load-ring span:nth-child(2) {-webkit-animation-delay: -.3s;animation-delay: -.3s;}
#loading>.box .load-ring span:nth-child(3) { -webkit-animation-delay: -.15s; animation-delay: -.15s;}

@-webkit-keyframes ring {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}
@keyframes ring {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}



/* end*/




/* loadmore*/

#loadmore{margin: 0 auto; padding: 50px 0;}
#loadmore>.loadmore{margin: 0 auto;text-align: center;}
#loadmore>.loadmore>a{display: inline-block; border: 1px solid #ddd; padding: 10px 50px; font-size: 1.6rem; transition: all .35s;}
#loadmore>.loadmore>a:hover{ background: rgba(0,91,97,1); border-color: rgba(0,91,97,1); color: #fff; }
#loadmore>.loading{margin:50px 0; height:46px; text-align:center; line-height:47px; display:none;}
#loadmore>.loading>div{width:12px; height:12px; background-color:#f08200; border-radius:100%; display:inline-block; animation:bouncedelay 1.4s infinite ease-in-out; animation-fill-mode:both; margin:0 3px;}
#loadmore>.loading .bounce1{animation-delay:-0.32s;}
#loadmore>.loading .bounce2{animation-delay:-0.16s;}

@keyframes bouncedelay{
    0%, 80%, 100%{transform:scale(0.0);}
    40%{transform:scale(1.0);}
}


/* end*/




/* foot*/
#foot{ position: relative;z-index: 60; margin: 0 auto; padding: 80px 0; background: #232323;}

#foot>.logo{ text-align:left;font-size: 2rem; font-weight: 600; color: #fff; padding-bottom: 50px;}
#foot>.logo>img{display: block; height:38px; width: auto; margin-bottom: 10px;}
#foot>.navbox{margin: 0 auto; padding: 80px 0;  border-top: 2px solid rgba(255,255,255,.1);}
#foot>.navbox>.qrcode{ width: 14%; text-align: center;}
#foot>.navbox>.qrcode>img{width: 120px;height: auto;}
#foot>.navbox>.qrcode>p{ display: block;padding-top: 10px; font-size: 1.4rem; color: rgba(255,255,255,.3);}
#foot>.navbox>.nav{ width: 86%; display: block;margin: 0 auto;}
#foot>.navbox>.nav>ul{margin: 0 auto;}
#foot>.navbox>.nav>ul>li{display: block;float: left; width: 16.66%; box-sizing: border-box;padding-right: 20px;}
#foot>.navbox>.nav>ul>li>a{ position: relative; display: block; font-size: 1.8rem; margin-bottom: 20px; font-weight: bold; color: #fff; transition: all .35s;}
#foot>.navbox>.nav>ul>li>a:after{ display: none; position: absolute;z-index: 5;left: 0;bottom: 0;width: 30px;height: 1px;background: rgba(255,255,255,.6);content: '';}
#foot>.navbox>.nav>ul>li>div{text-align: left;}
#foot>.navbox>.nav>ul>li>div>a{display: block; padding: 6px 0; font-size: 1.6rem; color: rgba(255,255,255,.5); transition: all .35s;}
#foot>.navbox>.nav>ul>li>div>a:hover{color: rgba(255,255,255,1);}

#foot>.copy{ font-size: 1.3rem; color: rgba(255,255,255,.2);}





/* end*/






@media only screen and (max-width: 1460px) {

    #head .menu>.nav>ul>li{ padding: 0 15px;}


}


@media only screen and (max-width: 1360px) {

    #head .menu>.nav>ul>li{ padding: 0 10px;}


}

@media only screen and (max-width: 1280px) {

    #head .logo{ width: 50%;}

    #head .menu{ width: 100px; height: 100px;}
    #head.active .menu{ width: 80px; height: 80px;}
    #head.inner .menu{ width: 90px; height: 90px;}

    #head .menu>.click{ display:block; position:absolute; right:-30px;top:50%; transform: translate(-50%,-50%); width:60px; height: 60px; cursor:pointer;}
    #head .menu>.click>.btn {position: absolute;top:50%; left:50%; z-index: 9; margin-top:-14px; margin-left:-14px; display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:28px;height:28px;-webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
    #head .menu>.click>.btn>span { position: relative; display:block; margin-top:13px;}
    #head .menu>.click>.btn>span,#head .menu>.click>.btn>span:after,#head .menu>.click>.btn>span:before { display: block;width:28px;height: 2px; border-radius: 3px; background-color: rgba(14,189,201,1);transition-duration: .4s;-webkit-transition-property: background-color,-webkit-transform;-moz-transition-property: background-color,-moz-transform; -o-transition-property: background-color,-o-transform; transition-property: background-color,transform;}
    #head .menu>.click>.btn>span:after,.menu>.click>.btn>span:before { position: absolute; content: "";}
    #head .menu>.click>.btn>span:before {top: -9px;}
    #head .menu>.click>.btn>span:after {top: 9px; width: 18px;}
    #head .menu>.click>.btn.active span { background-color: transparent;}
    #head .menu>.click>.btn.active span:after,#head .menu>.mob>.btn.active span:before {background-color:rgba(14,189,201,1);}
    #head .menu>.click>.btn.active span:before {transform: translateY(9px)rotate(45deg);}
    #head .menu>.click>.btn.active span:after { width: 28px; transform: translateY(-9px)rotate(-45deg);}

    #head .menu>.nav{display: none;}

    #menu-mob { position: fixed;z-index: 900;top: 0; left: 0; width: 100%;height: 100%; background:rgba(0,91,97,1);}
    #menu-mob>.close{ display: none; position: absolute;z-index: 3; right: 0;top: 0; cursor: pointer; background: rgba(14,189,201,1); width: 50px;height: 50px; line-height: 50px; text-align:center; }
    #menu-mob>.close>i{color: #fff;font-size: 2rem; font-weight: 600;}
    #menu-mob>.nav{ width: 86%;margin: 0 auto; padding:13% 0;}
    #menu-mob>.nav>ul{display:block; margin: 0 auto;}
    #menu-mob>.nav>ul>li{display:block;}
    #menu-mob>.nav>ul>li>a{ position: relative; display:block; font-size:1.8rem; color:#fff;padding:20px 30px; transition:all .35s;}
    #menu-mob>.nav>ul>li.active>a{ color: rgba(14,189,201,1);  background: rgba(0,0,0,.2); border-radius: 8px 8px 0 0;}
    #menu-mob>.nav>ul>li.on>a:after{ position: absolute;z-index: 1; right: 20px;top: 50%; margin-top: -10px; width:20px;height: 20px; color: rgba(255,255,255,.3); font-family: 'iconfont'; font-size: 1.8rem; content: '\e639'; transition: all .35s;}
    #menu-mob>.nav>ul>li.active>a:after{right:27px;transform:rotate(180deg);}
    #menu-mob>.nav>ul>li>div{display:none;padding:6px 40px 12px 40px; background: rgba(0,0,0,.2); border-radius: 0 0 8px 8px;}
    #menu-mob>.nav>ul>li>div>a{display:block;padding:8px 0; font-size:1.6rem; font-weight: 200; color:rgba(255,255,255,.9);}
    #menu-mob>.nav>ul>li>div>a>img{display: none;}


/*    #head .menu>.nav{display: block;position: fixed;z-index: 90; right: 0;top: 90px; padding: 30px 0; width: 100%; height: 100%; background: rgba(0,91,97,.9);}
    #head .menu>.nav>ul{margin: 0 auto;}
    #head .menu>.nav>ul>li{display: block;padding: 0 50px; border-bottom: 1px solid rgba(255,255,255,.2);}
    #head .menu>.nav>ul>li:last-child{border: 0;}
    #head.inner .menu>.nav>ul>li>a{display: block;font-size: 1.6rem; line-height: 50px;}
    #head.inner .menu>.nav>ul>li>a{display: block;font-size: 1.6rem; line-height: 50px; color: #fff;}
    #head.inner .menu>.nav>ul>li>div{position: relative;top: 0;  left: 0; transform: translate(0, 0); text-align: left; width: 100%; border-radius: 0!important; padding: 20px 0; box-sizing: border-box;background: none; box-shadow:0!important; }
    #head.inner .menu>.nav>ul>li>div>a{display: block; text-align: left; padding:8px 0;}
    #head.inner .menu>.nav>ul>li>div>a>img{display: inline-block; height: 42px; margin: 0 10px 0 0;}
    #head.inner .menu>.nav>ul>li>div>a:hover{  transform: translate(0,0);}

    #head.active .menu{ width: 80px; height: 80px;}*/

    #banner>.inner>.box>.tit{font-size: 3.2rem;}
    #banner>.inner>.box>.txt{ font-size: 1.8rem;}

    #head.inner .search>a>i{color: #ccc;}


    #search>.close>i{font-size: 4rem;}
    #search>.box{ margin-left: -30%;  width: 60%;}
    #search>.box form>input{ width: 75%; height: 56px; line-height: 56px; font-size: 1.4rem;}
    #search>.box form>button{ width: 25%; height: 56px; line-height: 56px;}
    #search>.box form>button>i{ font-size: 1.8rem;}




}




@media only screen and (max-width: 1200px) {

    #foot>.navbox>.nav>ul>li>a{font-size: 1.7rem;}
    #foot>.navbox>.nav>ul>li>div>a{font-size: 1.4rem;}

}

@media only screen and (max-width: 1080px) {

    #banner>.inner>.box>.tit{font-size: 3rem; color: #fff;}
    #banner>.inner>.box>.txt{  font-size: 1.6rem; }

}



@media only screen and (max-width: 860px) {

    #head .logo img{height: 50px;}
    #head .menu { width: 100px;height: 100px;}
    #head.inner{ height: 80px;}
    #head.inner .logo{line-height: 80px;}
    #head.inner .logo img{height: 40px;}
    #head.active .menu { width: 80px;height: 80px;}


    #menu-mob>.nav{padding:20% 0;}
    #menu-mob>.nav>ul>li>a{font-size:1.6rem;padding:16px 30px;}
    #menu-mob>.nav>ul>li>div>a{font-size:1.4rem;}



    #foot>.logo{font-size: 1.8rem;}
    #foot>.navbox>.nav>ul>li{width: 23%;padding-right: 0;}
    #foot>.navbox>.nav>ul>li>div{display: none;}

    #foot>.navbox>.qrcode{ width: 18%;}
    #foot>.navbox>.nav{ width:82%;}


}


@media only screen and (max-width:780px) {

    #banner{ margin-top: 70px}


    #banner>.inner>.box{display: none;}



}




@media only screen and (max-width: 640px) {
    #foot{ padding:80px 0 30px 0;}
    #foot>.logo{font-size: 1.5rem; text-align: center;}
    #foot>.logo>img{ margin: 0 auto 10px auto;}
    #foot>.navbox{padding: 40px 0;}
    #foot>.navbox>.nav{display: none;}
    #foot>.navbox>.qrcode{float: none;width: 100%;}
    #foot>.navbox>.qrcode>img{width: 200px;height: auto;}

    #foot>.copy{ width: 100%;max-width: inherit; text-align: center; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px;}
    #foot>.copy>a{display: block;}

}

@media only screen and (max-width: 520px) {

    #head{top: 0;}
    #head .logo { width: 70%;}
    #head .logo img{height: 32px;}
    #head .menu {right: 40px;}
    #head .search {width: 40px;}

    #head.inner .logo img{height: 32px;}

    #menu-mob>.nav{padding-top:120px;}
    #menu-mob>.nav>ul>li>a{font-size:1.4rem;padding:10px 30px;}
    #menu-mob>.nav>ul>li>div>a{font-size:1.3rem;}

}